import { getBookingScheduleList, getDepartmentByHoscode, geScheduleList } from '@/api/hosp';
import { Space, Table, TreeSelect,Card } from 'antd';
import { decode } from 'punycode';
import { useCallback, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
const { TreeNode } = TreeSelect;
type Tdepartment = {
    depcode: string,
    depname: string,
    children: Tdepartment[]
}
export default function Department() {
    // 获得医院编码
    const { hoscode } = useParams();

    // 医院科室数据
    const [departmentList, setDepartmentList] = useState<Tdepartment[]>([]);
    const [expandedRowKeys, setExpandedRowKeys] = useState<string>("-1");
    const [depcode, setDepcode] = useState<string>("");
    const [bookingScheduleList, setBookingScheduleList] = useState<any[]>([]);
    const [total, setTotal] = useState<number>(1);
    const [current, setCurrent] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(5);

    const getBookingScheduleListAsync = async (current: number, depcode: string) => {
        const result: any = await getBookingScheduleList(current, pageSize, hoscode as string, depcode);
        setBookingScheduleList(result.bookingScheduleList.map((v: any) => ({ ...v, scheduleList: [] })));
        setTotal(result.total);
        setCurrent(current);
        setDepcode(depcode);
        setExpandedRowKeys("-1")
    }

    const geScheduleListAsync =async (workDate: string) => {
        const result = await geScheduleList(hoscode as string, depcode, workDate);
        
        setBookingScheduleList(bookingScheduleList.map((item) => {
            if (item.workDate == workDate) item.scheduleList = result;
            return item;
        }))
    }
    // 获取医院科室数据
    useEffect(() => {
        const getDepartmentListAsync = async () => {
            const departmentList: any = await getDepartmentByHoscode(hoscode as string);
            setDepartmentList(departmentList);

        }
        getDepartmentListAsync();
    }, [])

    return (
        <Space size="middle" direction="vertical" style={{ width: "100%" }}>

            <TreeSelect
                showSearch
                filterTreeNode={(inputValue: string, treeNode: any) => {
                    return treeNode.title.includes(inputValue);
                }}
                style={{ width: '100%' }}
                // value={undefined}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="请选择科室"
                allowClear
                // 设置弹窗滚动高度
                listHeight={500}
                // treeDefaultExpandAll
                onChange={depcode => getBookingScheduleListAsync(1, depcode)}
            >
                {
                    departmentList.map((department: Tdepartment) => (
                        <TreeNode selectable={false} key={department.depcode} value={department.depcode} title={department.depname}>
                            {
                                department.children.map(childInfo => (
                                    <TreeNode key={childInfo.depcode} value={childInfo.depcode} title={childInfo.depname} />
                                ))
                            }
                        </TreeNode>
                    ))
                }
            </TreeSelect>
            <Table rowKey={"workDate"}
                bordered
                pagination={{
                    pageSize,
                    current,
                    total,
                    onChange(page) {
                        getBookingScheduleListAsync(page, depcode)
                    }
                }}
                dataSource={bookingScheduleList}

                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(value, rows, index) {
                            return (current - 1) * pageSize + index + 1
                        }
                    },
                    {
                        title: "医师数量",
                        align: "center",
                        dataIndex: "docCount"
                    },
                    {
                        title: "号源时间",
                        align: "center",
                        render(rows) {
                            return rows.workDate + "(" + rows.dayOfWeek + ")"
                        }
                    },
                    {
                        title: "预约总数",
                        align: "center",
                        dataIndex: "reservedNumber"
                    }, {
                        title: "剩余预约数",
                        align: "center",
                        dataIndex: "availableNumber"
                    }
                ]}
                onExpand={(expanded, record: any) => {
                    if (expanded) {
                        setExpandedRowKeys(record.workDate);
                        geScheduleListAsync(record.workDate)
                    }else{
                        setExpandedRowKeys("-1")
                    }
                }}
                expandable={{
                    expandedRowKeys:[expandedRowKeys],
                    expandedRowRender(record: any) {

                        console.log(record);
                        return (<Card><Table loading={record.scheduleList.length===0} bordered rowKey={"id"} pagination={false} dataSource={record.scheduleList} columns={[
                            {
                                title: "职称",
                                align: "center",
                                dataIndex: "title"
                            },

                            {
                                title: "号源时间",
                                align: "center",
                                dataIndex: "workDate"
                            },
                            {
                                title: "预约总数",
                                align: "center",
                                dataIndex: "reservedNumber"
                            },
                            {
                                title: "剩余预约数",
                                align: "center",
                                dataIndex: "availableNumber"
                            },
                            {
                                title: "挂号费",
                                align: "center",
                                dataIndex: "amount"
                            }, {
                                title: "挺长技能",
                                align: "center",
                                dataIndex: "skill"
                            }
                        ]} /></Card>)
                    }
                }}>

            </Table>
        </Space>
    )
}